<template>
  <div class="bind-wrap">
    <div class="myself-item">
        <div class="item-list box box-align-center">
            <div class="title">{{type=='mobile'?'手机号':'邮箱号'}}：</div>
            <input v-model="mobile" :placeholder="type=='mobile'?'请输入手机号':'请输入邮箱号'" type="number" maxlength="18" >
        </div>
        <div class="item-list box box-align-center ">
            <div class="title">{{type=='mobile'?'验证码':'激活码'}}：</div>
            <input class="code" v-model="code" :placeholder="type=='mobile'?'请输入验证码':'请输入激活码'" maxlength="18" >
            <div v-if="type=='mobile'" @click="getCode" class="send-code">{{codeMsg}}</div>
            <div v-if="type!='mobile'" @click="getCode1" class="send-code">{{codeMsg}}</div>
        </div>
    </div>
    <div class='footer-submit' @click="login">提交</div>
  </div>
</template>

<script>
let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");
export default {
  components: {

  },
  data () {
    return {
        mobile:'',
        codeMsg:'发送验证码',
        code:'',
        type:''
    }
  },
  mounted(){
   this.type = this.$router.currentRoute.query.type;
   console.log(this.type)
  },
  methods:{
    getCode(){
        console.log(333)
        if (!this.mobile) {
            let text = this.type=='mobile'?'手机号不能为空':'邮箱不能为空'
            this.$vux.toast.show({
                text: text,
                type:'cancel'
            })
            return;
        }
        if (!(/^1[34578]\d{9}$/.test(this.mobile))) {
            this.$vux.toast.show({
                text: '手机号格式不对',
                    type:'cancel'
            })
            return;
        }
            if (this.codeMsg != '发送验证码') {
                return;
            }
            let time = 60;
            this.getCodeNum()
            setInterval(() => {
            if (time <= 1) {
                this.codeMsg = '发送验证码'
                return;
            }
            this.codeMsg =time-- + 's'
            }, 1000)
 
    },
    getCodeNum(){
        let  url = CONSTANT.URL.LOGIN.MOBILECODE,
            param = {mobile:this.mobile,bizType:'change_username'}
        common.requestAjax(url,{},param,(res)=>{
            if(res.status == 200){
                this.$vux.toast.show({
                    text: res.msg
                })
            }else{
              this.$vux.toast.show({
                    text:res.msg,
                    type:'cancel'
                })
            }
        })
    },
    getCode1(){
        var reg = /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\;))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/;
        if (!this.mobile) {
            let text = this.type=='mobile'?'手机号不能为空':'邮箱不能为空'
            this.$vux.toast.show({
                text: text,
                type:'cancel'
            })
            return;
        }
        if (!reg.test(this.mobile)) {
            this.$vux.toast.show({
                text: '邮箱格式不对',
                type:'cancel'
            })
            return;
        }
            if (this.codeMsg != '发送激活码') {
                return;
            }
            let time = 60;
            this.getCodeNum1()
            setInterval(() => {
            if (time <= 1) {
                this.codeMsg = '发送激活码'
                return;
            }
            this.codeMsg =time-- + 's'
            }, 1000)
 
    },
    getCodeNum1(){
        let  url = CONSTANT.URL.LOGIN.EMAILCODE,
            param = {email:this.mobile,bizType:'change_username'}
        common.requestAjax(url,{},param,(res)=>{
            if(res.status == 200){
                this.$vux.toast.show({
                    text: res.msg
                })
            }else{
              this.$vux.toast.show({
                    text:res.msg,
                    type:'cancel'
                })
            }
        })
    },
    login(){
         var reg = /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\;))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/;
        if (!this.mobile) {
            let text = this.type=='mobile'?'手机号不能为空':'邮箱不能为空';
            this.$vux.toast.show({
                text: text,
                type:'cancel'
            })
            return;
        }
        if (!(/^1[34578]\d{9}$/.test(this.mobile))&&this.type=='mobile') {
            this.$vux.toast.show({
                text: '手机号格式不对',
                    type:'cancel'
            })
            return;
        }
        if (!reg.test(this.mobile)&&this.type!='mobile') {
            this.$vux.toast.show({
                text: '邮箱格式不对',
                type:'cancel'
            })
            return;
        }
        if (!this.code) {
            let text = this.type=='mobile'?'验证码不能为空':'激活码不能为空';
            this.$vux.toast.show({
                text: text,
                type:'cancel'
            })
            return;
        }
        let  url = CONSTANT.URL.LOGIN.CHANGEUSERNAME,
            param = {
                userName:this.mobile,
                code:this.code,
                registerType:this.type=='mobile'?'mobile':'email'
            }
        common.requestAjax(url,{},param,(res)=>{
            if(res.status == 200){
                this.$vux.toast.show({
                    text: res.msg
                })
                this.$router.go(-1);
            }else{
              this.$vux.toast.show({
                    text:res.msg,
                    type:'cancel'
                })
            }
        })         
      }
  }
}
</script>

<style lang="scss">
 .bind-wrap{
     height: 100%;
     background-color: #f4f4f4;
     padding-top: .3rem;
     overflow: hidden;
    .myself-item{
        background-color: #ffff;
        font-size: .32rem;
        color: #333;
        .item-list{
            height: .98rem;
            border-bottom: 1px solid #DEDEDE;
            padding-right: .3rem;
            padding-left: .3rem;
            input{
                height: .98rem;
                border: 0px;
                &:focus{
                    outline: 0px;
                }
            }
            input.code{
                width: 3.3rem;
            }
            input[placeholder], [placeholder], *[placeholder] { 
                color:#999 !important; 
                text-align: left;
                font-size: .32rem;
                
            } 
        }
    }
    .send-code{
        position: relative;
        width: 2.02rem;
        padding-left: .3rem;
        height: .98rem;
        line-height: .98rem;
        text-align: center;
        font-size: .34rem;
        color: #333;
        &:after{
            position: absolute;
            content: '';
            width: .02rem;
            height: .5rem;
            left: 0;
            top: .24rem;
            background-color: #DEDEDE;
        }
    }
    .footer-submit{
        width: 6.9rem;
        height: .88rem;
        background-color: #0063AE;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        text-align: center;
        color: #fff;
        font-size: .34rem;
        line-height:.88rem;
        margin: 1.37rem auto 0;
    }
 }
</style>
